<template>
	<div>
		<div class="main">
			<!-- 头部 -->
			<Top :Label="'登录'"></Top>
			<!--  -->
			<div class="TopNextCom components">

				<div class="form sign-in">
					<h2>欢迎回来</h2>
					<label>
						<span>手机账号</span>
						<input type="number" v-model="username" />
					</label>
					<label>
						<span>密码</span>
						<input type="password" v-model="password" />
					</label>
					<p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
					<button type="button" class="submit" @click="loginhandle">登 录</button>
					<button type="button" class="fb-btn">使用 <span>其他</span> 方式登录</button>
				</div>

			</div>
		</div>



	</div>
</template>

<script>
	//导入top组件
	import Top from '../components/Top.vue'
	export default {
		components: {
			Top
		},
		name: "",
		data() {
			return {
				username: '',
				password: ''
			}
		},
		created() {

		},
		methods: {
			//登录请求

			async loginhandle() {
				const {
					data: res
				} = await this.$http.get('/login/cellphone', {
					params: {
						phone: this.username,
						password: this.password
					}
				})
				//c储存token令牌
				if (res.code !== 200) {
					console.log(res)
					this.$message.error('登录失败')
				} else {
					window.sessionStorage.setItem("token", res.token)
					//跳转页面
					this.$router.push('/')
					this.$message.success('登录成功')

				}


			}

		}
	}
</script>

<style>
	*,
	*:before,
	*:after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body {
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		background: #ededed;
	}

	input,
	button {
		border: none;
		outline: none;
		background: none;
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	}





	.form {
		position: relative;
		width: 100%;
		height: 100%;

		padding: 50px 30px 0;
	}



	h2 {

		text-align: center;
	}

	button {
		display: block;
		margin: 0 auto;
		width: 260px;
		height: 36px;
		border-radius: 30px;
		color: #fff;
		font-size: 15px;
		cursor: pointer;
	}



	label {
		display: block;
		width: 260px;
		margin: 25px auto 0;
		text-align: center;
	}

	label span {
		font-size: 12px;
		color: #909399;
		text-transform: uppercase;
	}

	input {
		display: block;
		width: 100%;
		margin-top: 5px;
		padding-bottom: 5px;
		font-size: 16px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
		text-align: center;
	}

	.forgot-pass {
		margin-top: 15px;
		text-align: center;
		font-size: 12px;
		color: #cfcfcf;
	}

	.forgot-pass a {
		color: #cfcfcf;
	}

	.submit {
		margin-top: 40px;
		margin-bottom: 20px;
		background: #d4af7a;
		text-transform: uppercase;
	}

	.fb-btn {
		border: 2px solid #d3dae9;
		color: #8fa1c7;
	}

	.fb-btn span {
		font-weight: bold;
		color: #455a81;
	}
</style>
